<template>
  <div class="module-card" v-if="user">
    <div class="module-header">
      <h2 class="module-title">用户信息

        <span v-if="$store.getters.userType != '00'">

          <el-tag type="" v-if="infoList.length" style="float:right;">
            专属销售<i class="el-icon-s-custom"></i>
            {{ infoList[0].nickName }}
            {{ infoList[0].phonenumber }}</el-tag>
        </span>

      </h2>

      <button class="text-gray-400 hover:text-primary" @click="handleMoreClick">
        <!-- <i class="fa fa-ellipsis-v"></i> -->
      </button>
    </div>

    <div class="p-4">
      <div class="flex items-center">
        <img :src="avatar" alt="用户头像" class="w-14 h-14 rounded-full object-cover border-2 border-primary/10">
        <div class="ml-4">
          <h3 class="font-semibold text-gray-800">{{ user.nickName }}</h3>
          <p class="text-sm text-gray-500 mt-0.5">所属权限 {{ user.roles[0].roleName }} <span v-if="user.phonenumber">| {{ user.phonenumber }}</span> </p>




          <div class="flex items-center mt-2 text-sm">
            <span class="flex items-center text-success mr-4" v-if="$store.getters.userType != '00'">
              <i class="fa fa-check-circle mr-1"></i> 账户正常
            </span>
            <span class="text-gray-500">
              上次登录: {{ user.loginDate }}
            </span>
          </div>
        </div>
      </div>
      <!-- {{ $store.getters.userType }} -->
      <div class="grid grid-cols-4 gap-3 mt-4" v-if="$store.getters.userType == '03' && yue">
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">账户余额</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.yue }}</div>
          <button class="text-primary text-xs mt-1 hover:underline" @click="handleRecharge">充值</button>
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">关注</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.guanzhu }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="handleRedeem">查看</button> -->
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月接单</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.yijieNum }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="handleRedeem">查看</button> -->
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月完成</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.wanchengNum }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="handleRedeem">查看</button> -->
        </div>
      </div>
      <div class="grid grid-cols-4 gap-3 mt-4" v-if="$store.getters.userType == '02' && yue">
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">企业余额</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.balance }}</div>
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">关注用户</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.collectionCount }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="handleRedeem">查看</button> -->
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月发布</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.fabuNum }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="handleRecharge">查看</button> -->
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月完成</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.wanchengNum }}</div>
          <!-- <button class="text-primary text-xs mt-1 hover:underline" @click="viewAllOrders">查看</button> -->
        </div>

      </div>
      <div class="grid grid-cols-5 gap-3 mt-4" v-if="$store.getters.userType == '00' && yue">
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月新增企业</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.xinzengEntityNum }}</div>
        </div>
      <!-- </div>
      <div class="grid grid-cols-3 gap-3 mt-4" v-if="$store.getters.userType == '00' && yue"> -->
        
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月发布订单</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.fabuNum }}</div>
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月完成订单</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.wanchengNum }}</div>
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月交易金额</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.wanchengAmount }}</div>
        </div>
        <div class="bg-gray-50 p-3 rounded">
          <div class="text-sm text-gray-500">本月充值金额</div>
          <div class="font-bold text-gray-800 mt-1">{{ yue.xinzengEntityAmount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { getUserProfile, updateUserRole } from "@/api/system/user";



export default {
  name: 'UserInfoCard',
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device'
    ]),
  },
  data() {
    return {
      user: null,
      yue: null,
      infoList: [],
    }
  },
  created() {
    this.getInfo()

  },
  methods: {
    viewAllOrders() {
      // 查看全部订单逻辑
      console.log('查看全部订单');
      this.$router.push("/order")
    },
    getInfo() {

      getUserProfile().then(response => {
        this.user = response.data;

      });
      // listInfo(this.queryParams).then(response => {
      //   this.infoList = response.rows;
      // });
     
    },
    handleMoreClick() {
      this.$emit('more-click', 'userInfo')
    },
    handleRecharge() {
      this.$emit('recharge')
    },
    handleRedeem() {
      this.$emit('redeem')
    }
  },
  mounted() {
    console.log('用户信息卡片组件已挂载')
  }
}
</script>

<style scoped>
/* 可添加组件专属样式 */
</style>